<template>
  <div class="history-item-wrapper">
    <p>
      <i
        ><span v-if="ageStage.year"
          >{{ ageStage.year }}{{ CONSTANTS.LABEL_BABYYEAR_CN }}</span
        ><span
          >{{ ageStage.month * 1 }}{{ CONSTANTS.LABEL_BABYMONTH_CN }}</span
        ></i
      ><i>{{ listItem.slashDate }}</i>
    </p>
    <van-row>
      <p v-for="para in listWith" :key="para.type">
        <span v-for="item in para.value" :key="item.type">
          <i>{{ item.name }}</i>
          <i>{{ item.score }}</i>
        </span>
      </p>
    </van-row>
  </div>
</template>
<script>
import * as CONSTANTS from '@/constants/index'

export default {
  props: {
    listItem: {
      type: Object,
      default: () => {},
      required: true,
    },
  },
  components: {},
  data() {
    return {
      CONSTANTS: Object.freeze(CONSTANTS),
      list: [
        {
          type: CONSTANTS.LABEL_HISTORYLIST_PARAONE,
          value: [
            {
              type: CONSTANTS.LABEL_LANGUAGESCORE,
              name: CONSTANTS.LABEL_LANGUAGE,
              score: 0,
            },
            {
              type: CONSTANTS.LABEL_LOGICSCORE,
              name: CONSTANTS.LABEL_LOGIC,
              score: 0,
            },
            {
              type: CONSTANTS.LABEL_SPACESCORE,
              name: CONSTANTS.LABEL_SPACE,
              score: 0,
            },
            {
              type: CONSTANTS.LABEL_SPORTSCORE,
              name: CONSTANTS.LABEL_SPORT,
              score: 0,
            },
          ],
        },
        {
          type: CONSTANTS.LABEL_HISTORYLIST_PARATWO,
          value: [
            {
              type: CONSTANTS.LABEL_MUSICSCORE,
              name: CONSTANTS.LABEL_MUSIC,
              score: 0,
            },
            {
              type: CONSTANTS.LABEL_RELATIONSHIPSCORE,
              name: CONSTANTS.LABEL_RELATIONSHIP,
              score: 0,
            },
            {
              type: CONSTANTS.LABEL_NATURESCORE,
              name: CONSTANTS.LABEL_NATURE,
              score: 0,
            },
            {
              type: CONSTANTS.LABEL_INTROSPECTIONSCORE,
              name: CONSTANTS.LABEL_INTROSPECTION,
              score: 0,
            },
          ],
        },
      ],
    }
  },
  computed: {
    ageStage() {
      return this.listItem.ageStage
    },
    listWith() {
      const listItem = this.listItem
      return this.list.map((para) => {
        let newPara = para.value.map((item) => {
          const score = listItem[item.type]
          return {
            ...item,
            score,
          }
        })
        return { ...para, value: newPara }
      })
    },
  },
  mounted() {
    console.warn('this.listItem')
    console.log(this.listItem)
    console.log('\n')
  },
  filters: {},
  watch: {},
  methods: {},
}
</script>

<style lang="less" scoped>
.history-item-wrapper {
  margin-top: 32px;
  width: 100%;
  height: 163px;
  // background-color: #fff000;
  // min-height: 100%;

  & > p {
    margin: 0;
    display: flex;
    & > i {
      display: inline-block;
      font-style: normal;
      & > span {
        display: inline-block;
        height: 14px;
      }
    }
    & > i:first-of-type {
      margin-left: 5px;
      height: 14px;
      line-height: 14px;
      font-family: 'SourceHanSansCN-Medium';
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: rgba(0, 0, 0, 0.8);
      // background-color: #00ffff;
    }
    & > i:nth-of-type(2) {
      height: 13px;
      margin-left: auto;
      margin-right: 13px;
      line-height: 13px;
      font-family: 'SourceHanSansCN-Normal';
      font-size: 13px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: rgba(0, 0, 0, 0.3);
    }
  }

  & > div {
    margin-top: 14px;
    padding-left: 5%;
    padding-right: 5%;
    width: 90%;
    height: 135px;
    background-color: #ffffff;
    box-shadow: 0px 3px 20px 0px rgba(76, 76, 76, 0.06);
    border-radius: 12px;

    & > p {
      margin: 0;
      margin-top: 23px;
      display: flex;
      justify-content: space-between;
      & > span {
        // width: 26px;
        // max-width: 26px;
        display: inline-block;
        // flex-direction: column;
        // background-color: #000fff;
        // margin-right: 19%;
        & > i {
          font-style: normal;
          display: block;
        }
        & > i:first-of-type {
          line-height: 13px;
          font-family: 'SourceHanSansCN-Normal';
          font-size: 13px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: rgba(0, 0, 0, 0.8);
        }

        & > i:nth-of-type(2) {
          width: 100%;
          text-align: center;
          margin-top: 9px;
          line-height: 13px;
          font-family: 'SourceHanSansCN-Normal';
          font-size: 13px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: rgba(0, 0, 0, 0.8);
          display: block;
        }
      }
    }

    & > p:first-of-type {
      border-top: 21px solid transparent;
      margin-top: 0px;
    }
  }
}
</style>
